.app-wrapper {
  width: 100%;
  height: 100%;
  position: relative;

  .el-container {
    height: 100%;

    :deep(.el-header) {
      padding: 0;
      height: auto;

      .header-wrapper {
        padding: 0 15px;
        height: var(--h-header);
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: var(--style-border);
      }

      .tags-view-wrapper {
        // padding: 0 20px;
        border-bottom: var(--style-border);
        height: var(--height-tags-view);
      }
    }

    .el-main {
      padding: 15px;
      box-sizing: border-box;
      overflow-x: hidden;
      background-color: var(--el-bg-color-page);
    }

    .el-footer {
      height: var(--h-footer);
      line-height: var(--h-footer);
      font-size: 10px;
      color: var(--el-text-color-secondary);
      text-align: center;
      padding: 0 20px;
      position: relative;

      &::before {
        content: '';
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        border-top: var(--style-border);
      }
    }
  }
}

.app-wrapper.app-vertical {
  .el-aside {
    width: var(--w-aside);
    position: relative;
    transition: width .28s;
    border-right: var(--style-border);

    &.aside-collapsed {
      width: var(--w-aside-collapsed);
    }
  }
}
